<template class="my">
  <div
    style="
      width: 1170px;
      height: 800px;
      margin: -40px 0px -10px -10px;
      background-color: #ccc;
    "
  >
    <div style="width: 1170px; float: left">
      <!--  视频插件  -->
      <div
        style="
          width: 550px;
          height: 400px;
          float: left;
          background-color: #fff;
          margin: 10px 0px 0px 10px;
        "
      >
        <div id="divPlugin" class="plugin"></div>
      </div>
      <!--  控制  -->
      <div
        style="
          width: 590px;
          height: 400px;
          float: left;
          background-color: #fff;
          margin: 10px 0px 0px 10px;
          overflow: auto;
        "
      >
        <el-col
          v-for="pointParam in pointParamList"
          :key="pointParam.index"
          :span="12"
        >
          <el-card :body-style="{ padding: '10px' }" style="margin: 10px">
            <el-row>
              <el-col :span="9">
                <el-card
                  :body-style="{ padding: '2px' }"
                  style="width: 86px; height: 86px"
                >
                  <img
                    v-if="
                      pointParam.paramInfo.pic == null ||
                      pointParam.paramInfo.pic == ''
                    "
                    :src="factorUrl"
                    class="image"
                    style="width: 80px; height: 80px"
                  />
                  <img
                    v-else
                    :src="pointParam.paramInfo.pic"
                    class="image"
                    style="width: 80px; height: 80px"
                  />
                </el-card>
              </el-col>
              <el-col :span="15">
                <div style="line-height: 43px; font-size: 16px">
                  {{ pointParam.paramInfo.name }}
                </div>
                <div style="line-height: 43px">
                  <el-button
                    size="mini"
                    type="primary"
                    @click="setCrol(pointParam)"
                    ><span style="font-size: 16px">设置</span></el-button
                  >
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </div>
    </div>
    <div style="width: 1170px">
      <!--  *****第二排*****  -->
      <!--  云台  -->
      <div
        style="
          width: 380px;
          height: 370px;
          float: left;
          background-color: #fff;
          margin: 10px 0px 0px 10px;
        "
      >
        <el-card class="box-card">
          监控列表
          <el-select
            v-model="videoIndex"
            @change="changeVideo"
            style="margin-left: 2px"
          >
            <el-option
              v-for="(videoInfo, videoIndex) in videoInfos"
              :key="videoInfo.id"
              :label="videoInfo.name"
              :value="videoIndex"
            ></el-option>
          </el-select>
        </el-card>
        <el-card
          class="box-card"
          v-if="isYtFlag"
          style="text-align: center; height: 296px"
        >
          <div>
            <div class="el-button-group">
              <div
                class="el-button primary"
                @mousedown="mouseDownPTZControl(5)"
                @mouseup="mouseUpPTZControl"
              >
                左上
              </div>
              <div
                class="el-button primary"
                @mousedown="mouseDownPTZControl(1)"
                @mouseup="mouseUpPTZControl"
              >
                向上
              </div>
              <div
                class="el-button primary"
                @mousedown="mouseDownPTZControl(7)"
                @mouseup="mouseUpPTZControl"
              >
                右上
              </div>
            </div>
            <br />
            <div class="el-button-group">
              <div
                class="el-button primary"
                @mousedown="mouseDownPTZControl(3)"
                @mouseup="mouseUpPTZControl"
              >
                向左
              </div>
              <div
                class="el-button primary"
                @mousedown="mouseDownPTZControl(9)"
                @mouseup="mouseUpPTZControl"
              >
                自动
              </div>
              <div
                class="el-button primary"
                @mousedown="mouseDownPTZControl(4)"
                @mouseup="mouseUpPTZControl"
              >
                向右
              </div>
            </div>
            <br />
            <div class="el-button-group">
              <div
                class="el-button primary"
                @mousedown="mouseDownPTZControl(6)"
                @mouseup="mouseUpPTZControl"
              >
                左下
              </div>
              <div
                class="el-button primary"
                @mousedown="mouseDownPTZControl(2)"
                @mouseup="mouseUpPTZControl"
              >
                向下
              </div>
              <div
                class="el-button primary"
                @mousedown="mouseDownPTZControl(8)"
                @mouseup="mouseUpPTZControl"
              >
                右下
              </div>
            </div>
          </div>
        </el-card>
        <el-card
          class="box-card"
          v-else
          style="
            text-align: center;
            pointer-events: none;
            background-color: #ccc;
            filter: alpha(Opacity=50);
            -moz-opacity: 0.5;
            opacity: 0.5;
          "
        >
          <div>
            <div class="el-button-group">
              <div
                class="el-button primary"
                @mousedown="mouseDownPTZControl(5)"
                @mouseup="mouseUpPTZControl"
              >
                左上
              </div>
              <div
                class="el-button primary"
                @mousedown="mouseDownPTZControl(1)"
                @mouseup="mouseUpPTZControl"
              >
                向上
              </div>
              <div
                class="el-button primary"
                @mousedown="mouseDownPTZControl(7)"
                @mouseup="mouseUpPTZControl"
              >
                右上
              </div>
            </div>
            <br />
            <div class="el-button-group">
              <div
                class="el-button primary"
                @mousedown="mouseDownPTZControl(3)"
                @mouseup="mouseUpPTZControl"
              >
                向左
              </div>
              <div
                class="el-button primary"
                @mousedown="mouseDownPTZControl(9)"
                @mouseup="mouseUpPTZControl"
              >
                自动
              </div>
              <div
                class="el-button primary"
                @mousedown="mouseDownPTZControl(4)"
                @mouseup="mouseUpPTZControl"
              >
                向右
              </div>
            </div>
            <br />
            <div class="el-button-group">
              <div
                class="el-button primary"
                @mousedown="mouseDownPTZControl(6)"
                @mouseup="mouseUpPTZControl"
              >
                左下
              </div>
              <div
                class="el-button primary"
                @mousedown="mouseDownPTZControl(2)"
                @mouseup="mouseUpPTZControl"
              >
                向下
              </div>
              <div
                class="el-button primary"
                @mousedown="mouseDownPTZControl(8)"
                @mouseup="mouseUpPTZControl"
              >
                右下
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <!-- 点位数据 -->
      <div
        style="
          width: 380px;
          height: 370px;
          float: left;
          background-color: #fff;
          margin: 10px 0px 0px 10px;
        "
      >
        <el-card class="box-card">
          <el-row>
            <el-col :span="12">{{ collectPoint.name }}</el-col>
            <el-col :span="12">{{ realDataObj["collecTimes"] }}</el-col>
          </el-row>
        </el-card>
        <el-card class="box-card" style="height: 314px">
          <div style="height: 262px">
            <el-scrollbar style="height: 100%">
              <el-row>
                <el-col
                  v-for="pointParam in numPointParamObj"
                  :key="pointParam.index"
                  :span="12"
                >
                  <span v-if="pointParam.paramInfo.paramType == 'num'">
                    <el-card class="box-card">
                      {{ pointParam.paramInfo.name }}：<span
                        v-html="realDataObj['param' + pointParam.paramId]"
                      ></span>
                      ({{ pointParam.paramInfo.unit }})
                    </el-card>
                  </span>
                </el-col>
                <el-col
                  v-for="pointParam in statePointParamObj"
                  :key="pointParam.index"
                  :span="12"
                >
                  <span v-if="pointParam.paramInfo.paramType == 'state'">
                    <el-card class="box-card">
                      {{ pointParam.paramInfo.name }}：<span
                        v-html="realDataObj['param' + pointParam.paramId]"
                      ></span>
                    </el-card>
                  </span>
                </el-col>
                <el-col
                  v-for="pointParam in faultPointParamObj"
                  :key="pointParam.index"
                  :span="12"
                >
                  <span
                    v-if="
                      pointParam.paramInfo.paramType == 'fault' &&
                      realDataObj[pointParam.paramId]
                    "
                  >
                    <el-card class="box-card">
                      {{ pointParam.paramInfo.name }}：<span
                        v-html="realDataObj['param' + pointParam.paramId]"
                      ></span>
                    </el-card>
                  </span>
                </el-col>
              </el-row>
            </el-scrollbar>
          </div>
        </el-card>
      </div>
      <!-- 气象站数据 -->
      <div
        style="
          width: 370px;
          height: 370px;
          float: left;
          background-color: #fff;
          margin: 10px 0px 0px 10px;
        "
      >
        <el-card class="box-card">
          <el-row>
            <el-col :span="12">气象站</el-col>
            <el-col :span="12">{{ realDataObjWeather["collecTimes"] }}</el-col>
          </el-row>
        </el-card>
        <el-card class="box-card" style="height: 314px">
          <el-row>
            <el-col
              v-for="(pointParam, i) in realDataObjWeather['pointParams']"
              :key="pointParam.index"
              :span="12"
              v-if="i < 5"
            >
              <span v-if="pointParam.paramInfo.paramType == 'num'">
                <el-card class="box-card">
                  {{ pointParam.paramInfo.name }}：<span
                    v-html="realDataObjWeather[pointParam.paramId]"
                  ></span>
                  ({{ pointParam.paramInfo.unit }})
                </el-card>
              </span>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { queryRealData, realDataWeather } from "@/api/basic/hisMain";
import { listPointParam } from "@/api/basic/pointParam";
import { crolParam } from "@/api/basic/collectPoint";
import { getVideoInfos } from "@/api/basic/videoInfo";
import { WebVideoCtrl } from "@/assets/js/webVideoCtrl.js";

export default {
  name: "SiteDetail2",
  components: {},
  props: {
    collectPoint: {
      type: Object,
    },
  },
  data() {
    return {
      factorUrl: require("@/assets/image/factor.jpeg"),
      crolParams: {
        pointId: this.collectPoint.id,
        mn: this.collectPoint.mn,
        dpParamId: null,
        value: 1,
      },
      realDataObj: {},
      numPointParamObj: [],
      statePointParamObj: [],
      faultPointParamObj: [],
      realDataObjWeather: { pointParams: [] },
      queryParams: {
        mn: this.collectPoint.mn,
        pointId: this.collectPoint.id,
      },
      pointParamList: [],
      queryParamsParam: {
        pageNum: 1,
        pageSize: 100,
        pointId: this.collectPoint.id,
        paramType: "crol",
      },
      videoInfos: [],
      videoIndex: null,
      // <!-- 视频监控
      hkvInfo: {
        ip: "", //海康威视摄像头/硬盘录像机的ip地址
        port: "", //海康威视摄像头/硬盘录像机的端口
        username: "", //海康威视摄像头/硬盘录像机的用户名
        password: "", //海康威视摄像头/硬盘录像机的密码
        channels: [], //海康威视摄像头/硬盘录像机的通道
      },
      hkvInfoOld: {
        //退出登入参数
        ip: "", //海康威视摄像头/硬盘录像机的ip地址
        port: "", //海康威视摄像头/硬盘录像机的端口
      },
      mySelectWnd: 0, //当前选中的窗口
      g_bPTZAuto: false,
      iProtocol: 1,
      loginLoading: false,
      startPlayLoading: false,
      iStreamType: 1,
      bZeroChannel: false,
      iRtspPort: 0,
      flag: true,
      isYtFlag: false,
      // 视频监控 -->
    };
  },
  watch: {
    collectPoint(val) {
      this.queryParamsParam.pointId = this.collectPoint.id;
      this.queryParams.pointId = this.collectPoint.id;
      this.getSiteFactor();
      this.getRealData();
      this.getRealDataWeather();
      this.getVideoInfos();
    },
  },
  created() {
    this.getSiteFactor();
    this.getRealData();
    this.getRealDataWeather();
    this.getVideoInfos();
  },
  mounted: function () {
    this.videoInitPlugin(); // 初始化video界面
  },
  destroyed: function () {
    this.clickStopRealPlay();
    this.onLogout();
  },
  methods: {
    setCrol(pointParam) {
      this.crolParams.dpParamId = pointParam.dpParamId;
      // crolParam(this.crolParams).then(response => {
      //   this.msgSuccess(response.data.msg)
      // });
      let _this = this;
      this.$confirm("是否确定控制设备?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return crolParam(this.crolParams);
        })
        .then((response) => {
          this.msgSuccess(response.data.msg);
        })
        .catch(function () {});
    },
    /** 查询测点视频列表 */
    getVideoInfos() {
      this.flag = true;
      this.videoInfos = [];
      this.videoIndex = null;
      getVideoInfos({ pointId: this.queryParams.pointId }).then((response) => {
        this.videoInfos = response;
        if (this.videoInfos.length > 0) {
          this.videoIndex = 0;
          this.clkVideoInfo(this.videoInfos[0]);
        }
      });
    },
    clkVideoInfo(videoInfo) {
      if (videoInfo.isYt == "Y") {
        this.isYtFlag = true;
      } else {
        this.isYtFlag = false;
      }
      this.hkvInfo.ip = videoInfo.ipCode;
      this.hkvInfo.port = videoInfo.portCode;
      this.hkvInfo.username = videoInfo.account;
      this.hkvInfo.password = videoInfo.password;
      this.hkvInfo.channels = [];
      if (!this.flag) {
        this.onLogoutAndLogin();
      } else {
        this.onLogin();
      }
      if (this.flag) {
        this.flag = false;
      }
    },
    changeVideo() {
      this.clkVideoInfo(this.videoInfos[this.videoIndex]);
    },
    getRealData() {
      let that = this;
      this.realDataObj = {};
      this.numPointParamObj = [];
      this.statePointParamObj = [];
      this.faultPointParamObj = [];
      queryRealData(this.queryParams).then((response) => {
        this.realDataObj = response.data;
        this.realDataObj["pointParams"].forEach(function (pointParam) {
          if (pointParam.paramInfo.paramType == "num") {
            that.numPointParamObj.push(pointParam);
          } else if (pointParam.paramInfo.paramType == "state") {
            that.statePointParamObj.push(pointParam);
          } else if (pointParam.paramInfo.paramType == "fault") {
            that.faultPointParamObj.push(pointParam);
          }
        });
      });
    },
    getRealDataWeather() {
      this.realDataObjWeather = {};
      realDataWeather({}).then((response) => {
        this.realDataObjWeather = response.data;
      });
    },
    getSiteFactor() {
      this.pointParamList = [];
      listPointParam(this.queryParamsParam).then((response) => {
        this.pointParamList = response.rows;
      });
    },
    // <!-- 视频监控
    onLogin() {
      let that = this;
      that.loginLoading = true;
      // 登录设备
      WebVideoCtrl.I_Login(
        that.hkvInfo.ip,
        that.iProtocol,
        that.hkvInfo.port,
        that.hkvInfo.username,
        that.hkvInfo.password,
        {
          async: true,
          success: function (xmlDoc) {
            // console.log('xmlDoc2', xmlDoc);//不能删除
            //TODO 获取通道信息
            setTimeout(function () {
              that.getChannelInfo();
              that.getDevicePort(that.hkvInfo.ip + "_" + that.hkvInfo.port);
            }, 10);
            setTimeout(function () {
              that.hkvInfoOld.ip = that.hkvInfo.ip;
              that.hkvInfoOld.port = that.hkvInfo.port;
              that.clickStartRealPlay();
            }, 500);
            that.loginLoading = false;
            // that.$message({
            //   showClose: true,
            //   message: '登录成功',
            //   type: 'success'
            // });
          },
          error: function () {
            that.loginLoading = false;
            // that.$message({
            //   showClose: true,
            //   message: '登录失败',
            //   type: 'error'
            // });
          },
        }
      );
    },
    onLogoutAndLogin() {
      try {
        if (this.hkvInfoOld.ip != "" && this.hkvInfoOld.port != "") {
          // this.hkvInfo.channels = [];
          let szDeviceIdentify =
            this.hkvInfoOld.ip + "_" + this.hkvInfoOld.port;
          let iRet = WebVideoCtrl.I_Logout(szDeviceIdentify);
          if (0 == iRet) {
            // this.$message({
            //   showClose: true,
            //   message: '退出成功',
            //   type: 'success'
            // });
            this.hkvInfoOld.ip = "";
            this.hkvInfoOld.port = "";
            this.onLogin();
            return true;
          } else {
            // this.$message({
            //   showClose: true,
            //   message: '退出失败',
            //   type: 'error'
            // });
            return false;
          }
        } else {
          this.hkvInfoOld.ip = "";
          this.hkvInfoOld.port = "";
          this.onLogin();
          return true;
        }
      } catch (err) {
        //console.log('错误！')
      }
    },
    onLogout() {
      if (this.hkvInfoOld.ip != "" && this.hkvInfoOld.port != "") {
        this.hkvInfo.channels = [];
        let szDeviceIdentify = this.hkvInfoOld.ip + "_" + this.hkvInfoOld.port;
        let iRet = WebVideoCtrl.I_Logout(szDeviceIdentify);
        if (0 == iRet) {
          // this.$message({
          //   showClose: true,
          //   message: '退出成功',
          //   type: 'success'
          // });
          this.hkvInfoOld.ip = "";
          this.hkvInfoOld.port = "";
          return true;
        } else {
          // this.$message({
          //   showClose: true,
          //   message: '退出失败',
          //   type: 'error'
          // });
          return false;
        }
      }
    },
    clickStartRealPlay() {
      this.clickStopRealPlay();
      // 开始预览
      let that = this;
      that.startPlayLoading = true;
      let szDeviceIdentify = that.hkvInfo.ip + "_" + that.hkvInfo.port;

      let j =
        that.hkvInfo.channels.length > 4 ? 4 : that.hkvInfo.channels.length;
      for (let i = 0; i < j; i++) {
        setTimeout(
          that.startRealPlay(szDeviceIdentify, i, that.hkvInfo.channels[i]),
          500
        );
      }
      that.startPlayLoading = false;
    },
    videoInitPlugin: function () {
      let iRet = WebVideoCtrl.I_CheckPluginInstall();
      if (iRet === -1) {
        alert("您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装");
        return;
      }
      this.initPlugin();
    },
    initPlugin: function () {
      let that = this;

      WebVideoCtrl.I_InitPlugin(550, 400, {
        bWndFull: true, //是否支持单窗口双击全屏，默I_CheckPluginInstall
        iWndowType: 2,
        myCbSelWnd: function (xmlStr) {
          //自己新增的方法
          let jsonObj = that.$x2js.xml2js(xmlStr);
          that.mySelectWnd = jsonObj.RealPlayInfo.SelectWnd;
          let szInfo = "当前选择的窗口编号：" + that.mySelectWnd;
          // console.log(szInfo);
        },
        cbInitPluginComplete: function () {
          WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
          //设置窗口1X1
          WebVideoCtrl.I_ChangeWndNum(1);
          // 检查插件是否最新
          if (WebVideoCtrl.I_CheckPluginVersion() === -1) {
            alert(
              "检测到新的插件版本，双击开发包目录里的WebComponentsKit.exe升级！"
            );
            return;
          }
        },
      });
    },
    getDevicePort: function (szDeviceIdentify) {
      let oPort = WebVideoCtrl.I_GetDevicePort(szDeviceIdentify);
      this.iRtspPort = oPort.iRtspPort;
    },
    startRealPlay: function (szDeviceIdentify, iWndIndex, iChannelID) {
      let that = this;
      WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
        iRtspPort: that.iRtspPort,
        iWndIndex: iWndIndex,
        iStreamType: 1,
        iChannelID: iChannelID,
        bZeroChannel: that.bZeroChannel,
        success: function () {
          // that.$notify({
          //   title: '成功',
          //   message: '开始预览通道' + iChannelID + '成功',
          //   type: 'success'
          // });
        },
        error: function (status, xmlDoc2) {
          // console.log(xmlDoc2)//不能删除
          // that.$notify({
          //   title: '失败',
          //   message: '开始预览通道' + iChannelID + '失败',
          //   type: 'error'
          // });
          if (status === 403) {
            // console.log("szInfo 设备不支持Websocket取流！");
          } else {
            // console.log("开始预览失败 ", status, xmlDoc2);
          }
        },
      });
    },
    clickStopRealPlay: function () {
      let j =
        this.hkvInfo.channels.length > 4 ? 4 : this.hkvInfo.channels.length;
      for (let i = 0; i < j; i++) {
        setTimeout(this.stopRealPlay(i), 1000);
      }
    },
    stopRealPlay: function (iWndIndex) {
      let that = this;
      WebVideoCtrl.I_Stop({
        iWndIndex: iWndIndex,
        success: function () {
          // that.$notify({
          //   title: '成功',
          //   message: '停止预览窗口' + iWndIndex + '成功',
          //   type: 'success'
          // });
        },
        error: function () {
          // that.$notify({
          //   title: '失败',
          //   message: '停止预览窗口' + iWndIndex + '失败',
          //   type: 'error'
          // });
        },
      });
    },
    // 获取通道，实际上可以根据自己的项目，获取数字通道，模拟通道，零通道中的一个或多个，不用全部获取（提高效率）
    getChannelInfo: function () {
      let that = this;
      let szDeviceIdentify = this.hkvInfo.ip + "_" + this.hkvInfo.port;
      // debugger
      // 数字通道
      that.hkvInfo.channels = [];
      WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, {
        async: false,
        mysuccess: function (xmlStr) {
          // console.log('mysuccess I_GetDigitalChannelInfo: ', xmlStr)
          let jsonObj = that.$x2js.xml2js(xmlStr);
          let list =
            jsonObj.InputProxyChannelStatusList.InputProxyChannelStatus;
          for (let x = 0; x < list.length; x++) {
            that.hkvInfo.channels.push(list[x].id);
          }
        },
        success: function (xmlDoc) {},
        error: function (status, xmlDoc) {
          // console.log("获取数字通道失败");
        },
      });
      // TODO 模拟通道
      // 模拟通道
      WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {
        async: false,
        mysuccess: function (xmlStr) {
          let jsonObj = that.$x2js.xml2js(xmlStr);
          // console.log("模拟通道mysuccess",xmlStr);
          // let list = jsonObj.VideoInputChannelList;
          // for (let x = 0; x < list.length; x++) {
          //   that.hkvInfo.channels.push(list[x].VideoInputChannel.id);
          // }
          var id = jsonObj.VideoInputChannelList.VideoInputChannel.id;
          that.hkvInfo.channels.push(id);
        },
        success: function (xmlStr) {
          // console.log("模拟通道success",xmlStr);
        },
        error: function (status, xmlDoc) {
          // console.log("模拟通道error",xmlDoc);
        },
      });
      // TODO 零通道
    },
    mouseDownPTZControl: function (iPTZIndex) {
      let oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.mySelectWnd);
      if (oWndInfo !== null) {
        if (iPTZIndex === 9 && this.g_bPTZAuto) {
          // iPTZSpeed = 0;
        } else {
          this.g_bPTZAuto = false;
        }

        WebVideoCtrl.I_PTZControl(iPTZIndex, false, {
          iPTZSpeed: 4,
          mysuccess: function (xmlStr) {
            // console.log("I_PTZControl", xmlStr);
            if (iPTZIndex === 9 && this.g_bPTZAuto) {
              // console.log(oWndInfo.szDeviceIdentify + " 停止云台成功！mouseDown");
            } else {
              // console.log(oWndInfo.szDeviceIdentify + " 开启云台成功！mouseDown");
            }
            if (iPTZIndex === 9) {
              this.g_bPTZAuto = !this.g_bPTZAuto;
            }
          },
          error: function (status, xmlDoc) {
            // console.log(oWndInfo.szDeviceIdentify + " 开启云台失败！mouseDown", status, xmlDoc);
          },
        });
      }
    },
    mouseUpPTZControl: function () {
      let oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.mySelectWnd);
      if (oWndInfo !== null) {
        WebVideoCtrl.I_PTZControl(1, true, {
          mysuccess: function (xmlStr) {
            // console.log(oWndInfo.szDeviceIdentify + " 停止云台成功！mouseUp", xmlStr)
          },
          error: function (status, xmlDoc) {
            // console.log(oWndInfo.szDeviceIdentify + " 停止云台失败！mouseUp", status, xmlDoc);
          },
        });
      }
    },
    // 视频监控 -->
  },
};
</script>
<style scoped>
.plugin {
  width: 400px;
  height: 400px;
}

.my-tag {
  margin-left: 3px;
}

.my-group-btn {
  margin-top: 5px;
}
</style>
<style scoped lang="scss">
::v-deep {
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}
</style>
<style>
.el-message-box__wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 1300px;
  right: 0;
}
</style>
